<template>
  <div class="resource-sidebar" :class="{ collapsed: collapsed }">
    <div class="sidebar-header">
      <span v-if="!collapsed">资源目录</span>
      <a-button
        type="text"
        size="small"
        @click="$emit('toggle-collapse')"
        class="collapse-btn"
      >
        <IconifyIcon
          :icon=" collapsed              ? 'ant-design:menu-unfold-outlined'              : 'ant-design:menu-fold-outlined'          "
        />
      </a-button>
    </div>

    <div v-if="!collapsed" class="sidebar-content">
      <!-- 搜索框 -->
      <div class="tree-search">
        <a-input
          v-model="searchKeyword"
          placeholder="搜索资源"
          allow-clear
          @change="handleSearch"
        >
          <template #prefix>
            <IconifyIcon icon="ant-design:search-outlined"/>
          </template>
        </a-input>
      </div>

      <!-- 资源树 -->
      <div class="resource-tree">
        <a-tree
          :tree-data="treeData"
          :expanded-keys="expandedKeys"
          :selected-keys="selectedKeys"
          :loading="loading"
          @expand="handleExpand"
          @select="handleSelect"
          @right-click="handleRightClick"
        >
          <template #title="{ title, resource }">
            <div class="tree-node">
              <IconifyIcon
                :icon="resource?.icon || 'ant-design:file-outlined'"
                :style="{ color: resource?.color || '#666' }"
              />
              <span class="node-title">{{ title }}</span>
              <a-tag
                v-if="resource?.business_type_name"
                size="small"
                :color="getBusinessTypeColor(resource.business_type)"
              >
                {{ resource.business_type_name }}
              </a-tag>
            </div>
          </template>
        </a-tree>
      </div>
    </div>

    <!-- 折叠时显示图标 -->
    <div v-else class="sidebar-collapsed">
      <div class="collapsed-icons">
        <a-tooltip title="展开目录" placement="right">
          <a-button type="text" @click="$emit('toggle-collapse')">
            <IconifyIcon icon="ant-design:menu-unfold-outlined"/>
          </a-button>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue';
import {IconifyIcon} from '@vben/icons';

interface Props {
  collapsed?: boolean;
  treeData?: any[];
  expandedKeys?: string[];
  selectedKeys?: string[];
  loading?: boolean;
  activeCategory?: string;
  customTags?: any[];
  selectedCustomTag?: string | null;
}

interface Emits {
  (e: 'toggleCollapse'): void;

  (e: 'search',

  keyword: string
  )
  : void;

  (e: 'expand',

  keys: string[]
  )
  : void;

  (e: 'select',

  keys: string[]
  )
  : void;

  (e: 'right-click',

  event: any
  )
  : void;

  (e: 'categoryChange',

  category: string
  )
  : void;

  (e: 'customTagClick',

  tag: any
  )
  : void
}

const props = withDefaults(defineProps<Props>(), {
  collapsed: false,
  treeData: () => [],
  expandedKeys: () => [],
  selectedKeys: () => [],
  loading: false,
  activeCategory: 'all',
  customTags: () => [],
  selectedCustomTag: null,
});

const emit = defineEmits<Emits>();

const searchKeyword = ref('');

const handleSearch = () => {
  emit('search', searchKeyword.value);
};

// 监听搜索关键词变化，实时搜索
watch(searchKeyword, (newKeyword) => {
  emit('search', newKeyword);
});

const handleExpand = (keys: string[]) => {
  emit('expand', keys);
};

const handleSelect = (keys: string[]) => {
  emit('select', keys);
};

const handleRightClick = (event: any) => {
  emit('right-click', event);
};

const getBusinessTypeColor = (type: string) => {
  const businessTypeConfig = {
    HOTEL: '#1890ff',
    APARTMENT: '#52c41a',
    SPA: '#eb2f96',
    SCENIC: '#13c2c2',
    RESTAURANT: '#fa8c16',
    MEDICAL_BEAUTY: '#722ed1',
    BEAUTY_SALON: '#eb2f96',
  };
  return businessTypeConfig[type as keyof typeof businessTypeConfig] || '#666';
};
</script>

<style lang="less" scoped>
.resource-sidebar {
  width: 220px;
  height: 100%;
  border-right: 1px solid #f0f0f0;
  background: #fff;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;

  &.collapsed {
    width: 48px;
  }

  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;

    .collapse-btn {
      padding: 0;
      width: 24px;
      height: 24px;
    }
  }

  .sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tree-search {
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
    }

    .resource-tree {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;

      .tree-node {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;

        .node-title {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .sidebar-collapsed {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;

    .collapsed-icons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }
}
</style>
